<template>
  <div class="scroll_bar_left" style="height: 86vh" @click="controlHandler">
    <div v-if="initialExpand">
      CLOSE MENU
      <img
        style="height: 25px"
        src="../../assets/right.png"
        alt="Description of the image"
      />
    </div>
    <div v-else>
      OPEN MENU
      <img
        style="height: 25px"
        src="../../assets/left.png"
        alt="Description of the image"
      />
    </div>
  </div>
</template>

<script setup>
import {
  defineEmits,
  ref,
  defineProps,
  onMounted,
  getCurrentInstance,
} from "vue";
import { setHead } from "@/utils/setHead";

const bus = getCurrentInstance().appContext.config.globalProperties.$bus;
const initialExpand = ref(null);

const props = defineProps({
  expand: {
    type: Boolean,
    default: true, // Default value
  },
});

const emits = defineEmits(["child-event"]);

const controlHandler = async () => {
  initialExpand.value = !initialExpand.value;
  emits("child-event");
};
onMounted(() => {
  initialExpand.value = props.expand;
  //监听全局事件总线
  bus.on("head", (msg) => {
    setHead(document.querySelector(".scroll_bar_left"), msg, 8);
  });
});
</script>

<style>
.scroll_bar_left {
  width: 20px;
  justify-content: right; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  writing-mode: vertical-lr; /* 竖排文字，从左到右 */
  text-align: right; /* 文字居中 */
  background-color: #2b2f35;
  font-family: "Arial", sans-serif; /* 设置字体 */
  font-size: 14px; /* 设置字号 */
  transform: rotate(-180deg); /* 反向旋转文字，使文字朝上 */
  white-space: nowrap; /* 不换行 */
  color: rgb(171, 171, 199); /* 文字颜色 */
  letter-spacing: 1px; /* 字间距 */
  padding: 5px; /* 文字与边框的间距 */
  cursor: pointer;
}
</style>
